<template>
  <div class="home-aside" v-if="blogTagList != null">
    <el-menu
      default-active="0"
    >
      <el-menu-item v-for="(item,index) in blogTagList" :key="item.id" :data="item" :index="index" @click="$router.replace({ params: { tag: item.url } })">
        <span>
          {{ item.name }}
        </span>
      </el-menu-item>
    </el-menu>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { useUserStore } from '../../store/user'
import { getLeftAsideTagList } from '../../api/blog'
const user = useUserStore()
let blogTagList = ref(null)
defineProps({
  tag: { type: String, required: true },
})

getLeftAsideTagList().then((res) => {
  blogTagList.value = res.result
  console.log(res.result)
})
</script>

<style lang="scss" scoped>
@import '/src/styles/variables';

.home-aside {
  position: absolute;
  top: 42px;
  z-index: 1;
  width: 10rem;
  height: 1000px;
  // 规定右侧每个卡片的基本外形
  > div {
    position: relative;
    margin-top: 12px;
    background-color: #ffffff;
  }
  > .poster {
    .attach-tag {
      position: absolute;
      right: 12px;
      bottom: 10px;
      padding: 2px 6px;
      font-size: 12px;
      color: #d7d7d7;
      cursor: pointer;
      background-color: rgba(232, 220, 220, 0.2);
      border-radius: 2px;
    }

    .attach-tag--light {
      color: #fff;
      background-color: rgb(89 89 89 / 75%);
    }
  }
}
</style>
